<template>
  <div>
    <!--灯杆详细信息窗口标题头-->
    <div class="modalmax_head">
      {{ $t("title.roadlampsystem_frontpage_title_details") }}
      <span class="maxclosedbtn" @click="lampmaxtoparent"></span>
    </div>
    <div>
      <!--灯控器主体信息-->
      <div class="modal_body">
        <div class="lamp">
          <!--灯控器条件过滤查询-->
          <div class="search">
            <form class="ant-form">
              <!-- <el-date-picker
                v-model="timeslot"
                type="daterange"
                align="right"
                size="mini"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                unlink-panels
                :range-separator="$t('tips.to')"
                :start-placeholder="$t('tips.startdate')"
                :end-placeholder="$t('tips.enddate')"
                :picker-options="pickerOptions"
              >
              </el-date-picker> -->
              <el-input
                size="mini"
                :placeholder="
                  $t(
                    'title.tunnellightingsystem_systemmanagement_title_devicename'
                  )
                "
                prefix-icon="el-icon-search"
                @keyup.enter.native="refreshdata(1)"
                v-model="search"
                clearable
              >
              </el-input>

              <el-input
                size="mini"
                :placeholder="
                  $t(
                    'title.tunnellightingsystem_systemmanagement_title_equipmentnumber'
                  )
                "
                prefix-icon="el-icon-search"
                @keyup.enter.native="refreshdata(1)"
                v-model="search2"
                clearable
              >
              </el-input>
              <div class="el-button-amplify">
                <el-button
                  size="mini"
                  type="info"
                  icon="el-icon-search"
                  circle
                  @click="refreshdata(1)"
                ></el-button>
              </div>
            </form>
          </div>
        </div>

        <!--灯控器设备列表-->
        <div class="lamptable">
          <el-table
            ref="multipleTable"
            size="medium"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            :height="tableheight"
            class="subtable"
          >
            <el-table-column type="expand">
              <template slot-scope="props">
                <div class="overview_echart">
                  <el-switch
                    v-model="lamp_echarttype"
                    :active-text="
                      $t('button.roadlampsystem_echart_button_electricalparam')
                    "
                    :inactive-text="
                      $t('button.roadlampsystem_echart_button_electricalenergy')
                    "
                  >
                  </el-switch>
                  <LampFreezedata
                    v-if="lamp_echarttype"
                    :lampfreezedata="props.row"
                  ></LampFreezedata>
                  <LampElectricenergy
                    v-else
                    :lampelectricenergy="props.row"
                  ></LampElectricenergy>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              type="index"
              :label="$t('table.roadlampsystem_frontpage_table_index')"
              width="70"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="deviceName"
              :label="$t('table.roadlampsystem_frontpage_table_name')"
              show-overflow-tooltip
              width="220"
            >
            </el-table-column>
            <el-table-column
              prop="serialNumber"
              :label="$t('table.roadlampsystem_frontpage_table_poleid')"
              sortable
              width="280"
              show-overflow-tooltip
            >
            </el-table-column>
            <!-- <el-table-column
                prop="groupid"
                :label="$t('table.roadlampsystem_frontpage_table_area')"
                sortable
                width="350"
                show-overflow-tooltip>
              </el-table-column> -->
            <!-- <el-table-column
                prop="alarm"
                :label="$t('table.alarm')"
                width="130"
                show-overflow-tooltip>
                <template slot-scope="scope">
                  <img  style="width: 18px;height: 18px" :src = "scope.row.alarm">
                </template>
              </el-table-column> -->
            <el-table-column
              prop="controlstatename"
              :label="$t('table.control')"
              width="150"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <div v-if="scope.row.controlstatename == '1'">
                  {{ $t("label.roadlampsystem_frontpage_label_manual") }}
                </div>
                <div v-else>
                  {{ $t("label.roadlampsystem_frontpage_label_auto") }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="onlinename"
              :label="$t('table.status')"
              width="130"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="voltage"
              :label="$t('table.voltage')"
              width="130"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <el-tag
                  v-if="
                    'voltage' in scope.row &&
                    scope.row.voltage != '' &&
                    scope.row.voltage != null
                  "
                  type="primary"
                  disable-transitions
                  >{{ scope.row.voltage }}</el-tag
                >
                <span v-else>---</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="electricity"
              :label="$t('table.current')"
              width="130"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <el-tag
                  v-if="
                    'electricity' in scope.row &&
                    scope.row.electricity != '' &&
                    scope.row.electricity != null
                  "
                  type="primary"
                  disable-transitions
                  >{{ scope.row.electricity }}</el-tag
                >
                <span v-else>---</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="actpow"
              :label="$t('table.activepower')"
              width="130"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <el-tag
                  type="primary"
                  v-if="
                    'actpow' in scope.row &&
                    scope.row.actpow != '' &&
                    scope.row.actpow != null
                  "
                  disable-transitions
                  >{{ scope.row.actpow }}</el-tag
                >
                <span v-else>---</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="temperature"
              :label="$t('table.temperature')"
              width="100"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <el-tag
                  v-if="
                    'temperature' in scope.row &&
                    scope.row.temperature != '' &&
                    scope.row.temperature != null
                  "
                  type="primary"
                  disable-transitions
                  >{{ scope.row.temperature }}</el-tag
                >
                <span v-else>---</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="dim"
              :label="$t('table.roadlampsystem_frontpage_table_dimmingratio')"
              width="120"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <el-tag
                  type="success"
                  v-if="
                    'dim' in scope.row &&
                    scope.row.dim != '' &&
                    scope.row.dim != null
                  "
                  disable-transitions
                  >{{ scope.row.dim
                  }}<span v-if="scope.row.dim != ''">%</span></el-tag
                >
                <span v-else>---</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="color"
              :label="$t('table.roadlampsystem_frontpage_table_cctratio')"
              width="90"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <el-tag
                  v-if="
                    'color' in scope.row &&
                    scope.row.color != '' &&
                    scope.row.color != null
                  "
                  type="success"
                  disable-transitions
                  >{{ scope.row.color
                  }}<span v-if="scope.row.color != ''">%</span></el-tag
                >
                <span v-else>---</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="dataTime"
              :label="
                $t('table.roadlampsystem_frontpage_table_lastcollectiontime')
              "
              show-overflow-tooltip
            >
              <!-- <template slot-scope="scope">
                <div>
                  {{
                    scope.row.dataTime
                      ? scope.row.dataTime.split(".")[0]
                      : ""
                  }}
                </div>
              </template> -->
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--分页功能-->
      <div class="modal_bottom">
        <el-pagination
          :small="true"
          :background="true"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          layout="total,sizes, prev, pager, next, jumper"
          :page-sizes="[15,30,60]"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import LampFreezedata from "@/components/echarts/lampfreezedata";
import LampElectricenergy from "@/components/echarts/lampelectricenergy";
import { listDeviceShort } from "@/api/iot/device";
export default {
  name: "lampmax",
  components: {
    LampFreezedata,
    LampElectricenergy,
  },
  props: {
    productId: {
      type: Number,
    },
  },
  data() {
    return {
      lamp_echarttype: true,

      tableData: [],
      currentPage: 1,
      perpage: 15,
      total: 0,

      search: "",
      search2: "",
      tableheight: "",

      imglist: [
        {
          imgurl: require("../../assets/image/redlight.png"),
        },
        {
          imgurl: require("../../assets/image/redlight1.png"),
        },
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: "Last week",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "Last month",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "Last three months",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      timeslot: null,
      starttime: "",
      endtime: "",
    };
  },
  mounted() {
    var that = this;
    $(document).ready(function () {
      that.tableheight = $(".modal_devicemax").height() - 125;
      that.tableheight = that.tableheight + "px";
    });
    this.refreshdata();
  },
  methods: {
    lampmaxtoparent() {
      this.msg = "lampmaxclose";
      this.$emit("lampmaxclose", this.msg);
    },
    handleSizeChange(val) {
      this.perpage = val;
      this.refreshdata();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.refreshdata();
    },
    refreshdata(msg) {
      this.DateTimeSlot();
      let params = {
        pageNum: this.currentPage,
        pageSize: this.perpage,
        productId: this.productId,
        beginTime: this.starttime,
        endTime: this.endtime,
      };
      this.getDeviceList(params);
    },
    DateTimeSlot() {
      if (this.timeslot == null) this.timeslot = "";
      this.starttime = this.timeslot[0];
      this.endtime = this.timeslot[1];
      if (this.starttime == null || this.starttime == "") {
        this.inittimeslot(); //初始化为近1个月操作日志
      }
    },
    inittimeslot() {
      //初始化为近1个月操作日志
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24);
      this.endtime = this.FormatDate(end, "yyyy-MM-dd");
      this.starttime = this.FormatDate(start, "yyyy-MM-dd");
      this.timeslot = [this.starttime, this.endtime];
    },
    getDeviceList(queryParams) {
      let that = this;
      listDeviceShort(queryParams).then((response) => {
        this.tableData = response.rows;
        for (let i in response.rows) {
          that.tableData[i].groupid = "--";
          if (response.rows[i].status === 4) {
            that.tableData[i].alarm = that.imglist[0].imgurl;
            that.tableData[i].onlinename = that.$t("menu.offline");
          } else {
            that.tableData[i].alarm = that.imglist[1].imgurl;
            that.tableData[i].onlinename = that.$t("menu.online");
          }
          if (response.rows[i].thingsModels) {
            const Model = response.rows[i].thingsModels.find(
              (model) => model.id === "DBA"
            );
            if (Model) {
              const GroupParam = Model.datatype.params.find(
                (param) => param.id === "DBA_Group"
              );
              if (GroupParam && GroupParam.value != "") {
                that.tableData[i].groupid = GroupParam.value;
              } else {
                that.tableData[i].groupid = "--";
              }
            }
          }
        }
        this.total = response.total;
      });
    },
  },
};
</script>

<style scoped>
.el-button-amplify {
  display: inline-block;
  height: 28px;
  margin-left: 10px;
  color: #c7c7c7;
}
.modal_bottom >>> .el-input__inner {
  height: 22px;
  background-color: #edeef0;
  color: #636363;
}
.modal_bottom >>> .el-pagination__total {
  color: #ffffff;
}
.modal_bottom >>> .el-pagination__jump {
  color: #ffffff;
}
.modal_bottom >>> .el-pagination.is-background .el-pager li {
  color: #636363;
  background-color: #fff;
}
.modal_bottom >>> .btn-prev {
  color: #636363;
  background-color: #fff;
}
.modal_bottom >>> .btn-next {
  color: #636363;
  background-color: #fff;
}
.modal_bottom >>> .el-popper {
  background-color: #18ab8f !important;
}

.modal_bottom
  >>> .el-pagination.is-background
  .el-pager
  li:not(.disabled).active {
  background-color: #edeef0 !important;
}
.modal_bottom {
  display: flex;
  justify-content: center;
  margin-top: 6px;
}
.overview_echart {
  width: 100%;
}
.ant-form {
  display: flex;
}
.ant-form div:nth-child(2) {
  margin-left: 10px;
}
.ant-form div:nth-child(3) {
  margin-left: 10px;
}
.search {
  width: 100%;
}
.search >>> .el-input {
  width: auto;
}
</style>
